<template>
  <div class="login">
    <div class="login_max">
      <!-- <span class="QRcode" @click='loginType=!loginType'>
                <i class="iconfont icon-erweima" v-if='loginType'></i>
                <i class="iconfont icon-computer_icon" v-else></i>
            </span> -->
      <div :class="[isUserLogin ? 'isnone' : '', 'userlog']" v-show="loginType">
        <form action="#" method="post" class="user">
          <div>
            <span class="iconfont iconshoujihao"></span>
            <input
              type="text"
              placeholder="手机号"
              v-model="phoneNumber"
              :class="[phoneiserr, 'inputSize']"
            />
            <span :class="[phonenone, 'none']">{{ pleasephone }}</span>
          </div>
          <div>
            <span class="iconfont iconmima"></span>
            <input
              type="password"
              placeholder="密码"
              v-model="Pwd"
              :class="pwdiserr"
            />
            <span :class="[pwdnone, 'none']">{{ pleasepwd }}</span>
          </div>
          
        </form>
        <div class='remember'>
          <el-checkbox v-model="isRememberPwd">记住密码</el-checkbox>
        </div>
        
          

        <el-button @click="userLog()" type="primary" style="width:300px;"
          >登录</el-button
        >
      </div>
      <!-- <div v-show="loginType==false">
                <div class='qcwarp'>
                    <img src="" alt="">
                </div>
                <span class='tiptip'>请打开微信扫一扫</span>
            </div> -->
    </div>
  </div>
</template>
<script>
import config from "../../../../public/config";
import { get } from "../../../../public/API/query";
export default {
  name: "Login",
  data() {
    return {
      isautologin: false,
      codeLogin: "",
      isUserLogin: false,
      isCodeLogin: true,
      isRead: false,
      phoneNumber: "",
      Pwd: "",
      phonenone: "",
      pwdnone: "",
      pleasephone: "请输入手机号",
      pleasepwd: "请输入密码",
      phoneiserr: "",
      pwdiserr: "",
      data: "",
      loginType: true,
      isRememberPwd: false,
    };
  },
  created() {
    console.log(config.get("v"));
    this.$axios
      .get(config.get("app_url") + "/index/index/v1000_init", {
        params: {
          edition: config.get("v"),
        },
      })
      .then((res) => {
        window.localStorage.setItem("init", JSON.stringify(res.data.data));
      });
    // if (config.get("userInfo")) {
    //     this.$router.push("/adIndex");
    // }

    var that = this;
    document.onkeypress = (e) => {
      e.charCode === 13 ? that.userLog() : "";
    };
    let accountPassword = JSON.parse(localStorage.getItem("$adminAccountPassword"));
    if (accountPassword && accountPassword.isRememberPwd) {
      this.phoneNumber = window.atob(accountPassword.phone);
      this.Pwd = window.atob(accountPassword.password);
      this.isRememberPwd = accountPassword.isRememberPwd;
    }
  },
  methods: {
    userClick() {
      this.isUserLogin = false;
      this.isCodeLogin = true;
      this.codeLogin = "";
      this.userLogin = "login_sele";
    },
    findUpPid(item, pid, action) {
      for (let key in item) {
        if (item[key].id == pid) {
          item[key].data_url = action;
        } else {
          this.findUpPid(item[key]._child, pid, action);
        }
      }
    },
    addRouter(item) {
      for (let key in item) {
        if (item[key].title == "首页") {
          this.findUpPid(this.data, item[key].pid, item[key].action);
        } else {
          this.addRouter(item[key]._child);
        }
      }
    },
    //账户密码登录
    userLog() {
      if (this.phoneNumber == "") {
        this.pleasephone = "请输入手机号";
        this.phoneiserr = "err";
        this.phonenone = "block";
      }
      if (!/^1[3456789]\d{9}$/.test(this.phoneNumber)) {
        this.pleasephone = "请输入正确的手机号";
        this.phonenone = "block";
        this.phoneiserr = "err";
      } else {
        this.phonenone = "";
        this.phoneiserr = "";
      }
      if (this.Pwd == "") {
        this.pleasepwd = "请输入密码";
        this.pwdiserr = "err";
        this.pwdnone = "block";
      } else {
        this.pwdnone = "";
        this.pwdiserr = "";
        let params = {
          username: this.phoneNumber,
          password: this.Pwd,
        };
        get("index/index/login", params, (res) => {
          if (res.code != 200) {
            this.$message.error(res.data.split(":")[1]);
          } else {
            this.$message.success("登录成功");
            let $accountPassword = {
              phone: window.btoa(params.username),
              password: window.btoa(params.password),
              isRememberPwd: this.isRememberPwd,
            };
            localStorage.setItem(
              "$adminAccountPassword",
              JSON.stringify($accountPassword)
            );
            if (res.data) {
              localStorage.setItem("token", res.data.token);
              config.setToken(res.data.token);
              config.setUserInfo(res.data);
            }
            this.$router.push({
              path: "/adIndex",
            });
            //17683851211
            get("index/index/getMenu", {}, (res) => {
              this.data = res.data;
              this.addRouter(this.data);
              config.setMenu(this.data);
              config.cleHis();
              this.$router.push({
                name: "adIndex",
              });
            });
          }
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
body {
  background: #f4f6ff;
}
input {
  border: 1px solid gainsboro;
  outline: none;
}
.isnone {
  display: none;
}
.none {
  display: none;
  color: red;
}

.block {
  display: block;
}
.login_max {
  width: 400px;
  height: 350px;
  text-align: center;
  margin: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding-bottom: 20px;
  .shou {
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 25px;
    width: 145px;
  }
  .user {
    width: 300px;
    margin: 60px auto;
    div {
      width: 100%;
      height: 40px;
      margin-top: 30px;
      position: relative;
      input {
        width: 100%;
        height: 100%;
        padding: 0 15px 0 58px;
      }
      span:first-child {
        width: 16px;
        height: 16px;
        position: absolute;
        left: 21px;
        top: 11px;
        // background: url(https://xinhehonggu.com/_nuxt/img/c180b47.png) no-repeat -371px -419px;
      }
    }
  }

  .login_sel {
    width: 390px;
    height: 21px;
    margin: 20px auto 0;
    font-size: 12px;
    color: #249dff;
    user-select: none;
    div:nth-child(1) {
      float: left;
      cursor: pointer;
    }

    a,
    span {
      margin-right: 5px;
    }
    .unautologin {
      width: 14px;
      height: 14px;
      color: #fff;
      background: #fff;
      text-align: center;
      border: 1px solid #249dff;
      line-height: 11px;
    }
    .autologinchecked {
      width: 14px;
      height: 14px;
      color: #fff;
      background: #249dff;
      text-align: center;
      border: 1px solid #249dff;
      line-height: 11px;
    }
    div {
      float: right;
    }
  }
  button {
    display: block;
    height: 40px;
    margin: auto;
    margin-bottom: 20px;
    background: #fff;
    color: #249dff;
    border: 1px solid #249dff;
    border-radius: 5px;
    outline: none;
    &:nth-of-type(1) {
      margin-top: 30px;
      background: #249dff;
      color: #fff;
    }
    &:nth-of-type(1):hover {
      opacity: 0.8;
    }
    &:nth-of-type(2):hover {
      background: #ecf5ff;
    }
  }
  .code {
    width: 549px;
    margin: auto;
    position: relative;
    div:nth-child(1) {
      span {
        position: absolute;
      }
      span:nth-of-type(1) {
        width: 16px;
        height: 26px;
        left: 21px;
        top: 7px;
        background: url(https://xinhehonggu.com/_nuxt/img/c180b47.png) no-repeat -371px -419px;
      }
      span:nth-of-type(2) {
        right: 8px;
        top: 10px;
        color: #249dff;
      }
    }
    div {
      width: 390px;
      height: 40px;
      margin: 30px auto 0;
      position: relative;
      input {
        outline: none;
        width: 100%;
        height: 100%;
        padding: 0 15px 0 58px;
      }
    }
    .yzm {
      margin-bottom: 20px;
      span {
        width: 48px;
        height: 30px;
        border-bottom: 2px solid gainsboro;
        margin-right: 20px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .yzminput {
      width: 100%;
      height: 40px;
      position: absolute;
      top: 60px;
      left: 80px;
      border: none;
      z-index: 999;
      outline: none;
      background: rgba(0, 0, 0, 0);
      padding-left: 20px;
      letter-spacing: 60px;
      caret-color: rgba(0, 0, 0, 0);
    }
  }

  .codeLogin_sel {
    width: 390px;
    margin: auto;
    font-size: 12px;
    color: #249dff;
    cursor: pointer;
    div:nth-child(1) {
      height: 20px;
      float: left;
      width: 100%;
    }
    div:nth-child(2) {
      float: right;
      margin-bottom: 20px;
    }
    .read {
      width: 14px;
      height: 14px;
      color: #fff;
      background: #fff;
      text-align: center;
      border: 1px solid #249dff;
      line-height: 11px;
    }
    .unread {
      width: 14px;
      height: 14px;
      color: #fff;
      background: #249dff;
      text-align: center;
      border: 1px solid #249dff;
      line-height: 11px;
    }
    span {
      margin-left: 5px;
      margin-bottom: 20px;
    }
    a {
      margin-left: 5px;
    }
  }
}
.QRcode {
  float: right;
  color: red;
  display: inline-block;
  shape-outside: polygon(100% 0, 100% 100%, 0 0);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 0);
  i {
    font-size: 60px;
    margin: 0;
  }
}
.qcwarp {
  width: 180px;
  height: 180px;
  background-color: #180;
  position: absolute;
  right: 50%;
  transform: translate(50%, 40%);
}
.tiptip {
  position: fixed;
  bottom: 45px;
  margin-left: -30px;
}
.remember{
  width:200px;
  float: left;
  margin-bottom:25px;
  margin-top:-40px;
  margin-left:-11px;
  
}
</style>
